import { Component, ErrorInfo, ReactNode } from 'react';
interface ErrorBoundaryProps {
    children: ReactNode;
}
interface ErrorBoundaryState {
    hasError: boolean;
    error: Error | null;
    errorInfo: ErrorInfo | null;
}
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor (props: ErrorBoundaryProps) {
        super(props);
        this.state = { hasError: false, error: null, errorInfo: null };
    }

    static getDerivedStateFromError () {
        // Обновить состояние, чтобы следующий рендер показал запасной UI
        return { hasError: true };
    }

    componentDidCatch (error: Error, errorInfo: ErrorInfo) {
        // Можно также сохранить информацию об ошибке в лог
        this.setState({ error: error, errorInfo: errorInfo });
        console.error('ErrorBoundary caught an error', error, errorInfo);
    }

    render () {
        if (this.state.hasError) {
            // Можно рендерить любой запасной UI
            return (
                <div>
                    <h2>Что-то пошло не так.</h2>
                    <details style={{ whiteSpace: 'pre-wrap' }}>
                        {this.state.error && this.state.error.toString()}
                        {this.state.errorInfo?.digest}
                        {this.state.errorInfo?.componentStack}
                    </details>
                </div>);
        }
        return this.props.children;
    }
}

export default ErrorBoundary;